<template>
  <fto-editable
    :ref="options.ref"
    :options="options"
    @row-update="rowUpdate"
    @row-edit="rowEdit"
    @row-edit-cancel="rowEditCancel"
  >
    <!--<template  slot="custom-top" :slot-scope="{ size, selectedData }">
      <div>
        <el-button :size="size" type="primary" @click="bulkEdit(selectedData)"
          >批量编辑</el-button
        >
        <el-button :size="size" type="primary" @click="bulkCancel(selectedData)"
          >批量取消</el-button
        >
        <el-button :size="size" type="primary" @click="bulkSubmit(selectedData)"
          >批量提交</el-button
        >
      </div>
    </template>-->
    <template slot="operation" :slot-scope="{ row, index, isEdit }" >
      <el-button
        type="text"
        @click="
          () => {
            $message({
              type: 'success',
              message: `自定义按钮点击${isEdit ? 'editing' : 'unedit'}`,
            });
          }
        "
      >{{ isEdit ? "editing" : "unedit" }}</el-button
      >
    </template>
  </fto-editable>
</template>
<script>
export default {
  data() {
    return {
      options: {
        ref: 'singleTable',
        operation: {
          // width: 160,
        },
        editBtn: true,
        propsHttp: {
          list: 'data'
        },
        serverMode: {
          url: 'static/data/table.json',
          datakey: 'data',
          data: {},
          type: 'GET'
        },
        columnConfig: [
          {
            prop: 'id',
            label: 'id',
            width: 58,
            fixed: 'left',
            sortable: true,
            hide: true
          },
          {
            prop: 'name',
            label: '姓名',
            fixed: 'left',
            sortable: 'custom',
            dicData: [
              { a: 1, b: 2 },
              { a: 2, b: 4 }
            ],
            cell: true,
            rules: {
              required: true,
              type: 'string',
              validator(rule, value, callback) {
                /*
                    if (value != "") {
                    return callback({
                        message: "姓名需要是lxh",
                    });
                    }
                */
                return callback()
              }
            }
          },
          {
            prop: 'sex',
            label: '性别',
            fixed: 'left',
            // slot: true,
            headerSlot: true,
            cell: true,
            type: 'select',
            dicData: [
              { label: '男', value: '1' },
              { label: '女', value: '2' }
            ]
          },

          {
            prop: 'birthday',
            label: '出生日期',
            fixed: 'left',
            formatter: function(row, value) {
              return `
                        ${new Date(value).toLocaleDateString()}
                        `
            },
            cell: true,
            type: 'date'
          }
          /*
          {
            prop: "cascader2",
            label: "级联2",
            cell: true,
            type: "cascader",
            separator: "*",
            props: {
              value: "id",
              label: "name",
              children: "childNode",
              lazy: true,
              lazyLoad(node, resolve) {
                const { level } = node;
                if (level === 0) {
                  setTimeout(() => {
                    resolve([
                      {
                        id: "dept-20a0cc719722490bbf2c3e4974d2d5c4",
                        name: "软件部",
                        childNode: [
                          {
                            id: "dept-482965b451684eca8dd85a48b9c73722",
                            name: "java组",
                            childNode: [],
                          },
                          {
                            id: "dept-4ecd23d9ec5c45fda27bbc1098af3be5",
                            name: "C#组",
                            childNode: [],
                          },
                          {
                            id: "dept-6b80102afba64a0a8230e804af6daf40",
                            name: "测试组",
                            childNode: [],
                          },
                          {
                            id: "dept-ac96b78bfe3e411ebe7419722e9fb1c5",
                            name: "前端组",
                            childNode: [],
                          },
                        ],
                      },
                      {
                        id: "dept-74a8fbee34474ca8b6037b68ad767f44",
                        name: "产品部",
                        childNode: [
                          {
                            id: "dept-3b88d37b56d343e5bb22e3b431f79340",
                            name: "三维美术组",
                            childNode: [],
                          },
                          {
                            id: "dept-781a2b3d20194305acc5ecc228c81c98",
                            name: "售前组",
                            childNode: [],
                          },
                          {
                            id: "dept-ef18a93ef488484794c94ba8fcf6b81c",
                            name: "产品设计组",
                            childNode: [],
                          },
                        ],
                      },
                      {
                        id: "dept-b41dec1ad9ab45998a7b721b38bcfd24",
                        name: "服务部",
                        childNode: [
                          {
                            id: "dept-09a4be15a8034185b2f7633859a18sew",
                            name: "服务组",
                            childNode: [],
                          },
                        ],
                      },
                      {
                        id: "dept-cb0560e3cab3sde5ae5be948fa3aa995",
                        name: "综合管理部",
                        childNode: [
                          {
                            id: "dept-07c5a8c439fd4028acb21021c581e6b2",
                            name: "财务组",
                            childNode: [],
                          },
                          {
                            id: "dept-564d58d02fb846edaab20706fd1e4635",
                            name: "商务组",
                            childNode: [],
                          },
                          {
                            id: "dept-80b0db437b76405d938a62c0626ada76",
                            name: "人事组",
                            childNode: [],
                          },
                        ],
                      },
                    ]);
                  }, 500);
                } else if (level === 2) {
                  setTimeout(() => {
                    resolve([
                      {
                        id: "user-6a3a7369a6v8478cb844a4g4a5666666",
                        name: "小何",
                        leaf: true,
                      },
                      {
                        id: "user-6a3a7369a6v8478cb844a4g4a5888888",
                        name: "小何同学",
                        leaf: true,
                      },
                      {
                        id: "user-75dfc18abed040319c66a13f20f46799",
                        name: "柏乐",
                        leaf: true,
                      },
                      {
                        id: "user-9722ab6fdfdf4cbe868f411520563aae",
                        name: "景杰",
                        leaf: true,
                      },
                      {
                        id: "user-b629a608a6df48e9bc617dc24427345d",
                        name: "何炎东",
                        leaf: true,
                      },
                      {
                        id: "user-c4ee9e42a90e47d1b4f94679d410e04c",
                        name: "李祥祥",
                        leaf: true,
                      },
                    ]);
                  }, 500);
                } else {
                  resolve([]);
                }
              },
            },
            change(...args) {
              console.log("cascader级联2", args);
            },
          },
          {
            prop: "cascader",
            label: "级联",
            cell: true,
            type: "cascader",
            filterable: true,
            showAllLevels: false,
            change(...args) {
              console.log("cascader级联", args);
            },
          },
          {
            prop: "tree2",
            label: "多选下拉",
            type: "tree",
            span: 12,
            cell: true,
            // row: true,
            multiple: true,
            dicData: [
              {
                label: "一级",
                value: 0,
                children: [
                  {
                    label: "一级1",
                    value: 1,
                  },
                  {
                    label: "一级2",
                    value: 2,
                  },
                ],
              },
            ],
            typeformat(item, labelKey, valueKen) {
              if (Object.keys(item).includes("$parent")) {
                return `子级->{${item[labelKey]}}，值->{${item[valueKen]}}`;
              }
              return `父级->{${item[labelKey]}}，值->{${item[valueKen]}}`;
            },
          },*/
        ],
        uiConfig: {
          height: '400px',
          selectionWidth:'100',
          showIndex: true,
          selection: true
        }
      }
    }
  },
  computed: {
    Table() {
      return this.$refs[this.options.ref]
    }
  },
  mounted() {

    // this.$refs["singleTable"]
     let {dataBaseTable}=this.$refs["singleTable"].$refs;
     setTimeout(()=>{
           dataBaseTable.doLayout();
     },500)
     // dataBaseTable.doLayout();
     // console.log("$singleTable",dataBaseTable.doLayout());
    /*
    this.$refs["singleTable"].setColumnByProp("cascader", {
      dicData: [
        {
          value: "zhinan",
          label: "指南",
          disabled: true,
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
    });*/
  },
  methods: {
    rowUpdate(model, index, done) {
      console.log('model', model)
      console.log('index', index)
      console.log('done', done)
      done()
    },
    rowEdit(model, index) {
      console.log('编辑', model, index)
    },
    rowEditCancel(model, index) {
      console.log('取消编辑', model, index)
    },
    bulkCancel(selectedData) {
      selectedData.forEach((curRow) => {
        this.Table.rowCanel(curRow, curRow.$index)
      })
    },
    bulkEdit(selectedData) {
      selectedData.forEach((curRow) => {
        this.Table.rowCellEdit(curRow, curRow.$index)
      })
    },
    bulkSubmit(selectedData) {
      selectedData.forEach((curRow) => {
        this.Table.rowCellUpdate(curRow, curRow.$index)
      })
    }
  }
}
</script>
